<template>
  <div class="circular-chart-container">
    <svg :width="size" :height="size" class="circular-chart">
      <!-- 背景圆环 -->
      <circle
        cx="50%"
        cy="50%"
        :r="radius"
        fill="none"
        :stroke="backgroundColor"
        :stroke-width="strokeWidth"
      />
      <!-- 前景圆环 -->
      <circle
        cx="50%"
        cy="50%"
        :r="radius"
        fill="none"
        :stroke="foregroundColor"
        :stroke-width="strokeWidth"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="calculateOffset()"
        stroke-linecap="round"
        :style="{ transform: `rotate(-90deg)`, transformOrigin: '50% 50%' }"
      />
      <!-- 中心文本 -->
      <text
        x="50%"
        y="50%"
        text-anchor="middle"
        dominant-baseline="middle"
        class="chart-center-text"
        :style="{ fontSize: `${textSize}px` }"
      >
        {{ value }}%
      </text>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'CircularChart',
  props: {
    value: {
      type: Number,
      required: true,
      default: 0,
      validator: (value) => value >= 0 && value <= 100
    },
    size: {
      type: Number,
      default: 120
    },
    strokeWidth: {
      type: Number,
      default: 12
    },
    backgroundColor: {
      type: String,
      default: '#e2e8f0'
    },
    foregroundColor: {
      type: String,
      default: '#4361ee'
    },
    textSize: {
      type: Number,
      default: 18
    }
  },
  computed: {
    radius() {
      return (this.size - this.strokeWidth) / 2 - 5;
    },
    circumference() {
      return 2 * Math.PI * this.radius;
    }
  },
  methods: {
    calculateOffset() {
      const progress = 1 - this.value / 100;
      return progress * this.circumference;
    }
  }
}
</script>

<style scoped>
.circular-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-center-text {
  font-weight: 700;
  fill: currentColor;
}
</style>